<template>
  <div class="vote_ranking_top_three">
    <div
      v-for="(item, idx) in topThreeList"
      :key="item"
      :class="{ first_item: idx === 0 }"
    >
      <div class="ranking_top_img" @click="jumpDetail(item)">
        <img :src="topImgs[idx]" alt="" class="decorate" />
        <img
          :src="item.sloganUrls ? item.sloganUrls[0] : noImg"
          alt=""
          class="profile"
        />
      </div>
      <div class="ranking_top_text t-center">
        <p class="mt05">
          <span class="f17 fw500">{{ item.vote || 0 }}</span>
          <span class="f12 desc">{{
            voteInfo.appBizVoteLayout.favourButtonUnit || "票"
          }}</span>
        </p>
        <p class="f12">{{ item.ordNum }}号 {{ item.authorName }}</p>
      </div>
      <ActiveBtn :voteItem="item" @submit="eimt('handleSubmit')" />
    </div>
  </div>
  <div v-for="(item, index) in otherList" :key="item" class="ranking_list">
    <div class="ranking_content" @click="jumpDetail(item)">
      <span class="w25">{{ index + 4 }}</span>
      <img :src="item.sloganUrls ? item.sloganUrls[0] : noImg" alt="" />
      <span class="w4 ml10">{{ item.ordNum }}号</span>
      <span class="flex-1 text_ellipsis">{{ item.authorName }}</span>
      <span class="t_right">{{ item.vote || 0 }}</span>
      <span class="f12 desc">{{
        voteInfo.appBizVoteLayout.favourButtonUnit || "票"
      }}</span>
    </div>
    <ActiveBtn :voteItem="item" @submit="eimt('handleSubmit')" />
  </div>
</template>
<script setup>
import noOne from "@/assets/images/no_one.png";
import noThree from "@/assets/images/no_three.png";
import noTow from "@/assets/images/no_tow.png";
import noImg from "@/assets/images/noImg.jpg";
import { computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import ActiveBtn from "./activeBtn.vue";
import { store } from "./store.js";

const router = useRouter();
const route = useRoute();
const topImgs = [noOne, noTow, noThree];
const prop = defineProps(["list", "voteId"]);
const eimt = defineEmits(["handleSubmit"]);
const voteInfo = ref(store.voteInfo);
const topThreeList = computed(() => {
  return prop.list.filter((item, index) => index < 3);
});
const otherList = computed(() => {
  return prop.list.filter((item, index) => index > 2);
});
// 跳转到候选项详情
const jumpDetail = (voteItem) =>
  router.push({
    name: "VoteItemDetail",
    query: {
      voteId: prop.voteId,
      candidateId: voteItem.candidateId,
      ...route.query,
    },
  });
</script>
<style scoped>
.vote_ranking_top_three {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin: 1.5rem;
  min-height: 15rem;
}

.vote_ranking_top_three > div {
  width: 9rem;
}

.first_item {
  position: absolute;
  top: -1rem;
  left: calc(50% - 4.5rem);
}

.ranking_top_img {
  position: relative;
  width: 9rem;
  height: 9rem;
}

.decorate {
  position: absolute;
  width: 100%;
  z-index: 9;
}

.profile {
  position: absolute;
  width: 7rem;
  height: 7rem;
  object-fit: cover;
  left: 1rem;
  top: 1rem;
  z-index: 8;
}

.ranking_list {
  display: flex;
  padding: 1rem 1.6rem;
  align-items: center;
  border-bottom: 1px solid var(--van-gray-3);
  justify-content: space-between;
}

.ranking_content {
  display: flex;
  align-items: center;
  flex: 1;
}

.ranking_list img {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  border-radius: 50%;
}

.flex-1 {
  flex: 1;
}
</style>
